<template>
  <div>
    <div class="self-layer"></div>
    <div class="imglist-modal">
      <p class="title-tips">选择图片</p>
      <!--图片标签-->
      <div class="edit-column">
        <span>图片类别：</span>
        <ul class="tag-list">
          <li v-for="(item,index) in imgFolder" :class="{selector:tabIndex == index}" @click="clickTab(index)">
            {{item.categoryName}}/{{item.count}}
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <!--图片列表-->
      <div class="img-list">
        <ul class="clearfix">
          <li v-for="(item,index) in imgList" @click="handleLayerClick(index)">
            <div class="img-box">
              <img :src="item.url"/>
            </div>
            <div class="title">{{item.materialName}}</div>
            <div class="layer-box" v-show="item.show">
              <div class="layer"></div>
              <img src="../../assets/images/layer-icon.png"/>
            </div>
          </li>

        </ul>
        <!--分页-->
        <div class="layer-pagination">
          <pagination @currentChange="handleCurrentChange" :total="1"></pagination>
        </div>
        <div class="button-box">
          <span>已经选择<em>2</em>张图片，最多可选100张</span>
          <button class="save-btn-two" @click="chooseImgOk">确定</button>
          <button class="cancel-btn" @click="cancelImg">取消</button>
        </div>
      </div>


    </div>
  </div>

</template>

<script>
  import {mapState, mapActions} from 'vuex';
  import VueCropper from 'vue-cropper'
  import util from '../../lib/util'
  import pagination from '../common/pagination.vue'

  export default {
    name: 'AsideRightBottom',
    components: {
      VueCropper,
      pagination
    },
    data() {
      return {
        imgList: [],

        imgListNum: [],
        imgFolder: [
          {
            categoryId: 1,
            categoryName: "全部分类",
            count: 0
          }
        ],
        tabIndex: 0,
        chooseDate: {}
      }
    },
    computed: {
      ...mapState(['showChooseImg','chooseArticleImg']),
    },
    created() {

      this.ajaxUserList();
    },
    methods: {

      // 请求素材列表
      ajaxUserList: function () {

        util.ajax.post('category/list', '').then((res) => {

          let data = res.data || [];

          this.imgFolder = this.imgFolder.concat(data);

          this.clickTab(0);
        });

      },
      // 点击分类
      clickTab: function (index) {


        this.tabIndex = index;

        let params = {
          categoryId: this.imgFolder[index].categoryId,
          pageNo: 1,
          pageSize: 10
        };
        this.ajaxList(params);
      },
      ajaxList: function (param) {
        util.ajax.post('material/list', {...param}).then((res) => {



          this.imgList = res.data ? res.data.list.map((item) => {

            item.show = false;
            return item;

          }) : [];

        })
      },
      // 选择图片
      handleLayerClick: function (index) {

        this.imgList[index].show = !this.imgList[index].show;

        this.chooseDate = this.imgList[index];
      },
      // 翻页
      handleCurrentChange: function (page) {


      },
      // 确定选择图片
      chooseImgOk:function () {

        this.$store.commit('SHOW_CHOOSE_LAYER', false);

        this.$store.commit('CHOOSE_ARTICLE_IMG', this.chooseDate)
      },
      cancelImg: function () {

        this.$store.commit('SHOW_CHOOSE_LAYER', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .imglist-modal {
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -568px;
    z-index: 1000;
    width: 1138px;
    .title-tips {
      margin-bottom: 20px;
      text-align: center;
      font-size: $fs24;
      color: $listTitleColor;
    }
    .edit-column {
      span {
        float: left;
        line-height: 28px;
        font-size: $fs14;
      }
      .tag-list {
        float: left;
        li {
          float: left;
          margin-left: 10px;
          padding: 0px 15px;
          line-height: 28px;
          color: $listTitleColor;
          font-size: $fs14;
          border: 1px solid $listborderColor;
          border-radius: 15px;
        }
        .selector {
          color: $colorWhite;
          border: 1px solid $mainborderColor;
          background: $mainborderColor;
        }
      }
      .tool-box {
        float: left;
        li {
          position: relative;
          float: left;
          margin-left: 10px;
          width: 28px;
          line-height: 28px;
          text-align: center;
          border-radius: 50%;
          border: 1px solid $listborderColor;
          .more-tag {
            position: absolute;
            top: 40px;
            left: -52px;
            z-index: 998;
            width: 128px;
            border: 1px solid $listborderColor;
            border-radius: 8px;
            background: $colorWhite;
            cursor: pointer;
            &:after,
            &:before {
              border: solid transparent;
              content: ' ';
              height: 0;
              bottom: 100%;
              position: absolute;
              width: 0;
            }
            &:after {
              border-width: 6px;
              border-bottom-color: $colorWhite;
              left: 60px;
            }
            &:before {
              border-width: 8px;
              border-bottom-color: $listborderColor;
              left: 58px;
            }
            span {
              width: 100%;
              line-height: 40px;
              font-size: $fs14;
              color: $listTitleColor;
              border-bottom: 1px solid $listborderColor;
              &:last-child {
                border: none;
              }
            }
          }
        }
      }
    }
    .img-list {
      padding: 20px 0px 0px;
      .isBlock {
        .layer-box {
          /*display: block !important;*/
        }
      }
      ul {
        height: 450px;
        li {
          position: relative;
          margin: 0px 20px 10px 0px;
          padding-bottom: 5px;
          float: left;
          width: 160px;
          &:hover {
            .layer {
              display: block;
            }
          }
          .img-box {
            margin-bottom: 5px;
            width: 100%;
            height: 100px;
            border: 1px solid $borderbottomColor;
            box-sizing: border-box;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .title {
            border: none;
            width: 100%;
            text-align: center;
            height: 30px;
          }
          .layer-box {
            /*display: none;*/
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -20px;
              margin-top: -20px;
              width: 40px;
              height: 40px;
              z-index: 2;
            }
            .layer {
              position: absolute;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              z-index: 2;
              background: rgba(255, 255, 255, 0.8);
              border: 1px solid $mainborderColor;
              .del-img {
                margin: 30px auto 20px;
                width: 100px;
                line-height: 30px;
                text-align: center;
                font-size: $fs14;
                border: 1px solid #3c4b68;
                background: #3c4b68;
                border-radius: 15px;
                color: $colorWhite;
                cursor: pointer;
              }
              .new-name {
                margin: 0 auto;
                width: 100px;
                line-height: 30px;
                font-size: $fs14;
                text-align: center;
                border: 1px solid $listborderColor;
                background: $colorWhite;
                border-radius: 15px;
                color: $listTitleColor;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }

  .layer-pagination {
    padding-top: 20px;
    text-align: center;
  }

  .button-box {
    padding-top: 20px;
    span {
      margin-right: 155px;
      font-size: $fs14;
      line-height: 40px;
      color: $listTitleColor;
      em {
        color: $borderColor;
      }
    }
    button {
      width: 180px;
    }
    .cancel-btn {
      margin-left: 20px;
    }
  }
</style>
